<template>
    <div class="chat">
      <div class="chat-box">
        <div class="chat-message" v-for="(message, index) in messages" :key="index">
          <div class="message-sender">{{ message.sender }}:</div>
          <div class="message-text">{{ message.text }}</div>
        </div>
      </div>
      <div class="chat-input">
        <input type="text" v-model="newMessage" />
        <button @click="sendMessage()">发送</button>
      </div>
    </div>
  </template>

<script>
export default {
  name: 'my-Chat',
  props: {
    messages: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      newMessage: ''
    }
  },
  methods: {
    sendMessage () {
      const message = {
        sender: '我',
        text: this.newMessage
      }
      this.$emit('send', message)
      this.newMessage = ''
    }
  }
}
</script>

  <style scope>
  .chat {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .chat-box {
    flex: 1;
    overflow-y: scroll;
  }

  .chat-message {
    margin-bottom: 10px;
  }

  .message-sender {
    font-weight: bold;
  }

  .chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .chat-input input {
    flex: 1;
    margin-right: 10px;
  }
  </style>
